<template>
  <div class="header">
      <div class="header-left">
        <div class="iconfont icon-back">&#xe658;</div>
      </div>
      <div class="header-input">
        <span class="iconfont icon-search">&#xe63c;</span>
        输入城市
      </div>
      <router-link tag="div" class="header-right" to="/city">
        {{this.city}}
        <span class="iconfont icon-more">&#xe65c;</span>
      </router-link>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'HomeHeader',
  computed: {
    ...mapState({
      city: 'city'
    })
  }
}
</script>
<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl'
  .header
    line-height .78rem
    background-color $bgColor
    color #fff
    display flex
    .header-left
        float left
        width .64rem
        text-align center
        .icon-back
          font-size .56rem
    .header-right
        float right
        min-width 1.04rem
        padding 0 .1rem
        text-align right
        .icon-more
          font-size .48rem
          margin-left -.14rem
    .header-input
        flex 1
        margin-top .12rem
        padding-left .2rem
        background-color #fff
        height .64rem
        line-height .64rem
        border-radius .1rem
        margin-left .2rem
        color #ccc

</style>
